<template>
    <div>
        <div style="padding: 10px;">
            <button-tab>
                <button-tab-item @on-item-click="consoleIndex()">今天</button-tab-item>
                <button-tab-item selected>本月</button-tab-item>
                <button-tab-item><span class="vux-reddot-s">本月</span></button-tab-item>
                <button-tab-item><span class="vux-reddot-s">所有</span></button-tab-item>
            </button-tab>
        </div>
        <group>
            <cell-box is-link v-for="(item, index) in movie_list" :key="index">
                <h5>{{ item.title }}</h5>
                <p>{{ item.year }}</p>
            </cell-box>
        </group>
    </div>
</template>

<script>
import {  ButtonTab, ButtonTabItem, Group, CellBox } from 'vux'
export default {
    components: {
        ButtonTab,
        ButtonTabItem,
        Group,
        CellBox
    },
    data(){
        return {
            movie_list: []
        }
    },
    created(){
        this.consoleIndex();
    },
    methods:{
        consoleIndex(){
            this.$http.jsonp('https://api.douban.com//v2/movie/top250?start=1&count=20', {},
            { 
                headers: {},
                emulateJSON: true }).then((response) => {
                    this.movie_list = response.data.subjects;
                    console.log(this.movie_list)
                });
        }
    }
}
</script>

<style lang="scss" scoped>

</style>


